<template>
  <div class="Home">
    <h1>路由跳转{{ getName }}</h1>
    <ul class="nav">
      <li class="nav-li">
        <span>form表单</span>
        <el-button type="primary" @click="handlePageA">pageA</el-button>
      </li>
      <li class="nav-li">
        <span>store数据管理</span>
        <el-button type="primary" @click="handlePageB">pageB</el-button>
      </li>
    </ul>
    <el-row style="margin-top: 20px;">
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <div style="margin-top: 20px;">
      <span>{{ $store.getters.bigSum }}</span>
    </div>
  </div>
</template>

<script>
export default {
    name:'homePage',
    data() {
        return {}
    },
    inject:['getName'],
    created(){
      console.log('1212',this.getName);
    },
    methods:{      
      handlePageA(){
        console.log(this.$route);
        this.$router.push('/pageA')
      },
      handlePageB(){
        this.$router.push('/pageB')
      }
    }
}
</script>

<style scoped>
.Home{
  width: 100%;
}
.Home .nav{
  display: flex;
}
.Home .nav-li{
  margin-left: 20px;
  width: 120px;
}
</style>